<template>
  <div class="page-header-index-wide">
    <common class="common" :loading="loading"/> 
    <div class="middle">
      <div class="left">
        <my-map class="map"/>
      </div>
      <div class="right">
        <information class="informate"/>
        <work class="work"/>
      </div>    
    </div>
    <breed class="breed" :loading="loading"/>
    <asset-discovery class="asset-discovery"/>
    <operator class="operator"/>
    <e-chart class="echart" ref="echart"/>
    <div @click="showDrawer" style="cursor: pointer;">
      <new-box></new-box>
    </div>
    <a-drawer
      title="问诊信息"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      width="640"
    >
      <comment/>
    </a-drawer>
    <setting />
  </div>
</template>
<script>
import reqwest from 'reqwest';
import infiniteScroll from 'vue-infinite-scroll';
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
import { getLoginfo,getVisitInfo } from '@/api/api';
import NewBox from '@/components/new/NewBox'
import { HomeDataMixin } from '@/mixins/HomeDataMixin'
import MyMap from "@/components/map/Map.vue"
import Common from './childCom/Common.vue';
import Breed from './childCom/Breed.vue';
import work from './childCom/work.vue';
import Information from './childCom/Information.vue';
import EChart from './childCom/EChart.vue';
import AssetDiscovery from './childCom/AssetDiscovery.vue';
import Operator from './childCom/Operator.vue'
import Comment from '@/components/new/Comment'
import Setting from './childCom/Setting.vue';


export default {
  directives: { infiniteScroll },
  components: { MyMap, NewBox, Common, Breed,  Information, EChart, work, AssetDiscovery, Operator, Comment, Setting },
  name: "Analysis",
  mixins:[ HomeDataMixin ],
  data () {
    return {
      visible: false,
      classes: 0,
      chartType: 'fullscreen',
      data: [],
      loading: true,
      busy: false,
      url:{
        cattleExist: "/chm/chmBizCattleBasicInfo/cattleExist"
      }
    };
  },
  beforeMount() {
    this.fetchData(res => {
      this.data = res.results;
    });
  },
  created() {
    this.loadBasic();
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
  },
  mounted(){
    setTimeout(()=>{
      this.$refs.echart.loadEchart()
    }, 0)
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    fetchData(callback) {
      reqwest({
        url: fakeDataUrl,
        type: 'json',
        method: 'get',
        contentType: 'application/json',
        success: res => {
          callback(res);
        },
      });
    },
    handleInfiniteOnLoad() {
      const data = this.data;
      this.loading = true;
      if (data.length > 14) {
        this.$message.warning('Infinite List loaded all');
        this.busy = true;
        this.loading = false;
        return;
      }
      this.fetchData(res => {
        this.data = data.concat(res.results);
        this.loading = false;
      });
    },
    initLogInfo () {
      getLoginfo(null).then((res)=>{
        if(res.success){
          Object.keys(res.result).forEach(key=>{
            res.result[key] =res.result[key]+""
         })
          this.loginfo = res.result;
        }
      })
      getVisitInfo().then(res=>{
        if(res.success){
           this.visitInfo = res.result;
         }
       })
    }
  },
}
</script>
<style lang="less" scoped>
  .page-header-index-wide{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .middle {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      .left {
        flex: 1;
        .map {
          width: 100%;
          height: 481px;
          overflow: hidden;
          border: 1px solid #f6f6f6;
          // border-radius: 20px;
        }
      }
      .right {
        flex: 1;
        .informate {
          width: 100%;
        }
      }
    }
    .breed {
      margin-top: 20px;
      width: 100%;
      img {
        width: 30%;
      }
    }
    .asset-discovery{
      display: inline-block;
    }
    .operator {
      display: inline-block;
      width: 50%;
    }
    .echart {
      position: relative;
    }
  }
</style>